<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>引入Vue使用</title>
</head>

<body>
  <div id="hello-vue" class="demo">
    <h1>这是一个Vue示例</h1>
    <p>{{ message }}</p>
    <p>{{ num }}</p>
    <p>{{person.name}}</p>
    <p>{{isOk ? "真的" : "假的"}}</p>
  </div>
  <hr />
  <div id="app" class="container">
    <h1>{{txt}}</h1>
  </div>
  <!-- <script type="module" src="/src/main.ts"></script>-->
  <!--引入之后就可以直接在js代码中访问-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const HelloVueApp = {
      data() {
        return {
          message: 'Hello Vue!!',
          num: 123,
          person: { id: 1, name: '小黑' },
          isOk: true,
        };
      }
    }
    // createApp接收一个对象，是vue组件实例的配置信息
    Vue.createApp(HelloVueApp).mount('#hello-vue')
    Vue.createApp({
      data() {
        return {
          txt: '这是app',
        };
      },
    }).mount('.container')
  </script>
</body>

</html>